<template>
  <div class="risk">
    <van-search
      class="info_search"
      v-model="value"
      placeholder="搜索"
      @search="onSearch"
      @clear="clearSearch"
    />
    <van-list
      style="margin-top: 10px"
      :finished="finished"
      v-model="loading"
      finished-text="没有更多了"
      @load="onListLoad"
    >
      <van-checkbox-group
        ref="checkboxGroup"
        @change="handleChange"
        v-model="result"
      >
        <van-cell v-for="(item, index) in list" :key="index">
          <div class="risk_item_radio">
            <div>
              <div class="mb-10">{{ item.ChnName }}</div>
              <div>
                {{ item.OrgFullName
                }}<span v-if="item.OrgFullName && item.PostName"></span
                >{{ item.PostName }}
              </div>
            </div>
            <van-checkbox :name="item.UserName"></van-checkbox>
          </div>
        </van-cell>
      </van-checkbox-group>
    </van-list>
    <div class="choose_btm">
      <div class="choose_cancel">
        <van-button class="mr-10" type="warning" size="small" @click="checkAll"
          >全选</van-button
        >
        <van-button class="mr-10" type="warning" @click="toggleAll" size="small"
          >取消全选</van-button
        >
        <div class="choose-people">已选择{{ result.length }}人</div>
      </div>
      <div class="choose_confirm">
        <van-button type="info" @click="submit">确定</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { GetChooseUserPageData } from "@/api/common";
export default {
  data() {
    return {
      list: [],
      userlist: [],
      result: [],
      loading: false,
      finished: false,
      filter: {
        dataType: "List",
        accounted: true,
        userKind: 0,
      },
      border: false,
      value: "",
      radio: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleChange(ids) {
      ids.map((item) => {
        this.list.map((innerItem) => {
          if (innerItem.UserName == item) {
            let flag = false;
            this.userlist.forEach((userItem) => {
              if (userItem.code == item) {
                flag = true;
              }
            });
            if (!flag) {
              this.userlist.push({
                code: innerItem.UserName,
                name: innerItem.ChnName,
                OrgFullName: innerItem.OrgFullName,
                PostName: innerItem.PostName,
              });
            }
          }
        });
      });
      for (var i = 0; i < this.userlist.length; i++) {
        var item = this.userlist[i];
        this.list.map((innerItem) => {
          if (innerItem.UserName == item.code) {
            let flag = false;
            ids.forEach((idItem) => {
              if (item.code == idItem) {
                flag = true;
              }
            });
            if (!flag) {
              this.userlist.splice(i, 1);
              i--;
            }
          }
        });
      }
    },
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll(false);
    },
    submit() {
      this.$emit("cb", this.userlist);
    },
    getList() {
      this.loading = true;
      GetChooseUserPageData(this.filter)
        .then((res) => {
          this.loading = false;
          if (res.data.PageIndex == 0) {
            this.list = res.data.Data;
          } else {
            this.list = this.list.concat(res.data.Data);
          }
          this.finished = false;
          this.filter.page = res.data.PageIndex;
          if (!res.data.HasNextPage) {
            this.finished = true;
          }
        })
        .catch((err) => {
            this.finished = true;
        });
    },
    onListLoad() {
      ++this.filter.page;
      this.getList();
    },
    onSearch() {
      var conditions = [];
      if (this.value) {
        conditions.push({
          Name: "ChnName",
          DisplayName: this.value,
          Value: this.value,
          Operator: "like",
          DataType: "String",
        });
      }
      this.filter.page = 0;
      this.filter.conditions = JSON.stringify(conditions);
      this.getList();
    },
    clearSearch() {
      this.filter = {
        page: 0,
        conditions: [],
      };
      this.value = "";
      this.getList();
    },
  },
};
</script>
<style lang="less" scoped>
.info_search {
  padding: 10px;
  border-radius: 5px !important;

  .van-field__control {
    background-color: #ffffff !important;
  }
}
</style>
<style lang="less" scoped>
.risk {
  height: 100vh;
  background-color: #e8f1f8;
}

.risk_item_radio {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border-bottom: 1px solid #e8f1f8;
}

.choose_btm {
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  .choose_cancel {
    padding: 0 10px;
    display: flex;
    align-items: center;
    float: left;
  }
  .choose_confirm {
    float: right;
    border-radius: 0;
  }
}
.choose-people {
  color: rgb(0, 195, 224);
  font-size: 14px;
}
</style>
